<script>
/**
 * @desc 首页的区块标题
 */

import { navTo } from '@/utils'

export default {
  name: 'home-section-title',
  props: {
    text: String,
    to: String
  },
  methods: { navTo }
}
</script>

<template>
  <div class="home-section-title">
    <i class="icon"></i>
    <span class="text">{{text}}</span>
    <i class="line"></i>
    <span class="more" @click="()=>navTo(to)">更多</span>
  </div>
</template>

<style lang="scss" scoped>
.home-section-title {
  display: flex;
  align-items: center;
  padding: 10px;
  font-size: 16px;

  .icon {
    width: 4px;
    height: 1em;
    margin-right: 10px;
    background-color: $main-color;
  }

  .line {
    flex: 1;
    height: 1px;
    margin: 0 10px;
    background-color: $border-color;
  }

  .more {
    color: $main-color;
  }
}
</style>
